<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高仿苏大2019校庆</title>
    <meta name="description" content="">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" >
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<style>
    body,html{
        margin: 0;
        padding: 0;
    }
    .testRem{
        width: 5rem;
        height: 200px;
        background-color: #91ff8b;
    }
</style>
<body>

<div class="loading">
    <div class="pic">
        <span></span>
        <b>0%</b>
    </div>
</div>
<section>
    <div class="app">
        <div class="flex-item left">
            <div class="content">
                <div class="top">
                    <div class="code">
                        <img src="images/1558862436.png"/>
                    </div>
                    <div class="scan">手机扫一扫更精彩</div>
                </div>
                <div class="i_need">我也要免费制作</div>
            </div>
        </div>
        <div class="flex-item middle">
            <div class="outside">
                <div class="inside">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <!-------------slide1----------------->
                            <section class="swiper-slide">
                                <img class="imgClass" src="//5372267.s50i.faiusr.com/2/101/ADIIABACGAAg7vng5gUomM36rgYw6Ac43As.jpg.webp"
                                     alt="">

                                <div class="one">
                                    <div class="english ani resize" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s"
                                         swiper-animate-delay="0.5s">Soochow University
                                    </div>
                                    <div class="szdx ani resize" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s"
                                         swiper-animate-delay="1s">苏州大学
                                    </div>
                                    <div class="szdx  ani resize" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s"
                                         swiper-animate-delay="1.5s">119周年
                                    </div>
                                    <div class="szdx  ani resize" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
                                         swiper-animate-delay="2s">校庆
                                    </div>
                                    <img class="imgClass ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s"
                                         swiper-animate-delay="2.5s"
                                         src="//5372267.s50i.faiusr.com/2/101/ADIIABAEGAAg44rh5gUo2OXmmwEw5gQ4Sg.png.webp" alt="">
                                </div>
                            </section>
                            <!-------------slide2----------------->
                            <section class="swiper-slide">
                                <img class="imgClass" src="//5372267.s50i.faiusr.com/2/101/ADIIABACGAAg7vng5gUomM36rgYw6Ac43As.jpg.webp"
                                     alt="">
                                <div class="one">
                                    <img class="imgClass_two  ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s"
                                         swiper-animate-delay="0.5s"
                                         src="//5372267.s50i.faiusr.com/2/101/ADIIABAEGAAg8v7t5gUo-uOB1wUwgBA4gAw!500x500.png" alt="">
                                    <div class="character ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0.5s"
                                         swiper-animate-delay="0.5s">
                                        <div>忆往昔，桃李不言，自有风雨话沧桑</div>
                                        <div>看今朝，厚德载物，更续辉煌誉五洲</div>
                                        <div>从1900年的东吴大学到如今的苏州大学</div>
                                        <div>这一百一十九载的风雨兼程</div>
                                        <div>“养天地正气，法古今完人”</div>
                                        <div>始终铭刻在每一名学子的心间</div>
                                        <div>不敢忘怀</div>
                                    </div>
                                </div>
                            </section>
                            <!-------------slide3----------------->
                            <section class="swiper-slide three">
                                <img class="imgClass" src="//5372267.s50i.faiusr.com/2/101/ADIIABACGAAg7vng5gUomM36rgYw6Ac43As.jpg.webp"
                                     alt="">
                                <div class="container">
                                    <div class="recall">一一忆往昔：那些群英荟萃</div>
                                    <div class="award">
                                        <div class="left">
                      <span class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s"
                            swiper-animate-delay="0.5s" style="display: inline-block">一个多世纪以来，一代代苏大人始终秉承“养天地正气，法古今完人”之校训，坚守学术至上、学以致用，倡导自由开放、包容并蓄、追求卓越，坚持博学笃行、止于至善，致力于培育兼具“自由之精神、卓越之能力、独立之人格、社会之责任”的模范公民。</span>
                                            <img class="ani skew_left"
                                                 src="//5372267.s50i.faiusr.com/4/101/ADIIABAEGAAgjf3t5gUoyPnK-wMwwAc41AU!300x300.png.webp"
                                                 alt="">
                                        </div>
                                        <div class="right">
                                            <img class="ani"
                                                 src="//5372267.s50i.faiusr.com/4/101/ADIIABAEGAAgjf3t5gUoirqW4gEwgAU4qAQ!300x300.png.webp"
                                                 alt="">
                                            <span class="ani skew_right" style="display: inline-block">在长期的办学过程中为社会输送了50多万名各类专业人才，包括许德珩、周谷城、费孝通、雷洁琼、孙起孟、赵朴初、钱伟长、董寅初、李政道、倪征日奥(yù）、郑辟疆、杨铁樑、查良镛（金庸）等一大批精英栋梁和社会名流；谈家桢、陈子元、郁铭芳、宋大祥、詹启敏等30多位两院院士，为国家建设与社会发展作出了重要贡献。</span>
                                        </div>
                                    </div>
                                </div>
                            </section>
                            <!-------------slide3----------------->
                            <section class="swiper-slide">
                                <img class="imgClass" src="//5372267.s50i.faiusr.com/2/101/ADIIABACGAAg7vng5gUomM36rgYw6Ac43As.jpg.webp"
                                     alt="">
                                <div class="container">
                                    <div class="recall">一一看今朝：与时俱进，开拓创新</div>
                                    <div class="award">
                                        <div class="wcdfontwrap">
                                            苏州大学坐落于素有“人间天堂”之称的历史文化名城苏州，是国家“211工程”、“2011计划”首批入列高校，是教育部与江苏省人民政府共建“双一流”建设高校、国家国防科技工业局和江苏省人民政府共建高校，是江苏省属重点综合性大学。
                                        </div>
                                        <img src="//5372267.s50i.faiusr.com/4/101/ADIIABAEGAAg8P7t5gUowIrX1QEwvAU4wAM!450x450.png.webp"
                                             alt="">
                                    </div>
                                </div>
                            </section>
                            <!-------------slide5----------------->
                            <section class="swiper-slide">
                                <img class="imgClass" src="//5372267.s50i.faiusr.com/2/101/ADIIABACGAAg7vng5gUomM36rgYw6Ac43As.jpg.webp"
                                     alt="">
                                <div class="container">
                                    <div class="recall">一一看今朝：与时俱进，开拓创新</div>
                                    <div class="award">
                                        <div class="wcdfontwrap">
                                            全校共有教职工5353人，具有副高职称及以上人员2646人，其中诺贝尔奖获得者1人，中国科学院及工程院院士7人，发达国家院士4人；国家杰出青年基金获得者27人、国家优秀青年基金获得者35人，“万人计划”杰出人才1人、“万人计划”科技创新领军人才10人、“万人计划”青年拔尖人才3人，国务院学位评定委员会学科评议组成员6人，一支力量比较雄厚、结构比较合理的师资队伍已初步形成。
                                        </div>
                                        <img src="//5372267.s50i.faiusr.com/4/101/ADIIABAEGAAgsYDu5gUo7PCe2QEwqAY4lgQ!450x450.png.webp"
                                             alt="">
                                    </div>
                                </div>
                            </section>
                            <!-------------slide6----------------->
                            <section class="swiper-slide">
                                <img class="imgClass" src="//5372267.s50i.faiusr.com/2/101/ADIIABACGAAg7vng5gUomM36rgYw6Ac43As.jpg.webp"
                                     alt="">
                                <div class="container">
                                    <div class="recall">一一看今朝：与时俱进，开拓创新</div>
                                    <div class="award">
                                        <div class="wcdfontwrap">
                                            2019年5月10日，ESI数据库更新了2019年5月最新数据，本次排名中，苏州大学国际排名位列第368位（较2019年3月国际排名提升36位），中国内地高校排名位列第19位，继续位列江苏省内第2位。其中，在22个ESI学科分类中，苏州大学进入全球前1%的学科有11个。其中化学、材料科学2个学科进入全球ESI排名前1
                                        </div>
                                        <img src="//5372267.s50i.faiusr.com/2/101/ADIIABACGAAgjKzv5gUokLPswQEwgAU4mgM!600x600.jpg.webp"
                                             alt="">
                                    </div>
                                </div>
                            </section>
                            <!-------------slide7----------------->
                            <section class="swiper-slide">
                                <img class="imgClass" src="//5372267.s50i.faiusr.com/2/101/ADIIABACGAAg7vng5gUomM36rgYw6Ac43As.jpg.webp"
                                     alt="">
                                <div class="container">
                                    <img src="//5372267.s50i.faiusr.com/4/101/ADIIABAEGAAg-Kfj5gUouM7K7QQw2gE4JA.png.webp" alt="">
                                    <div class="div_p">
                                        <p>
                                            <span>英</span><span>华</span><span>恒</span><span>久</span><span>远</span><span>，</span><span>精</span><span>神</span><span>永</span><span>远</span><span>流</span><span>传</span>
                                        </p>
                                        <p>
                                            <span>明</span><span>天</span><span>的</span><span>成</span><span>就</span><span>，</span><span>已</span><span>载</span><span>入</span><span>历</span><span>流史</span>
                                        </p>
                                        <p>
                                            <span>而</span><span>未</span><span>来</span><span>的</span><span>辉</span><span>煌</span><span>，</span><span>需</span><span>要</span><span>我</span><span>们</span><span>去</span><span>谱</span><span>写</span><span>。</span>
                                        </p>
                                        <p>
                                            <span>苏</span><span>大</span><span>，</span><span>生</span><span>日</span><span>快</span><span>乐</span><span>!</span>
                                        </p>
                                    </div>
                                    <div class="small_heart">
                                        <img src="images/heart.png" height="100" width="100"/></div>
                                    <div class="images">
                                        <div class="headerImg " style="background:url(http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKyRrIvCbCLca7a95tfM6AHndN41YNmfibJGnqm9xbSBrbtKzYPVQcffNAGMCPibfCupGypzlumoibfA/132) no-repeat;background-size: cover; width: 1.7rem;height: 1.7rem;border-radius: 50%;display: inline-block"></div>
                                        <div class="headerImg " style="background:url(http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqaPEKZvicAlB6mtprVdt3AVU1OmJzaQpr7ITz1DVFhldXc0TWyg9Qp7WwJLuQ3DiaX31fxWknibE4ow/132) no-repeat;background-size: cover; width: 1.7rem;height: 1.7rem;border-radius: 50%;display: inline-block"></div>
                                        <div class="headerImg " style="background:url(http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJt3iahafdJDQiaz4IjPic07tECHicfaPo7WBOB4RKzQficKAc1MDnlwk83xicicyn7e6dP3IgZteqnE7xPg/132) no-repeat;background-size: cover; width: 1.7rem;height: 1.7rem;border-radius: 50%;display: inline-block"></div>
                                        <div class="headerImg " style="background:url(http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKsP0hKuhl5p4rGf83CUhd0iaTx72fXycyYhm1tglBZZiaQq35r5QjibwJk8HSwhbVc8q3wnkHkSIic1Q/132) no-repeat;background-size: cover; width: 1.7rem;height: 1.7rem;border-radius: 50%;display: inline-block"></div>
                                        <div class="headerImg " style="background:url(http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJicw81gAN4bFibrErcnlVltzG8ic0gLbOdJh8HLZQwCytq7q4U78zKzGaiawbp1TK6yH6XluibpNbYeuQ/132) no-repeat;background-size: cover; width: 1.7rem;height: 1.7rem;border-radius: 50%;display: inline-block"></div>
                                        <div class="headerImg " style="background:url(//cd.faisys.com/image/avatar/0.jpg.webp) no-repeat;background-size: cover; width: 2rem;height: 2rem;border-radius: 50%;display: inline-block"></div>
                                        <div class="headerImg " style="background:url(http://thirdwx.qlogo.cn/mmopen/vi_32/4ibpmUMoQLOVZ2RZtgnOo74WNmU8ZeAlicy1NfQBrEl6DVoKBuZSxrcLibhtJUvNCnFd4xacdicK1X0icXLYxxWHPJQ/132) no-repeat;background-size: cover; width: 1.7rem;height: 1.7rem;border-radius: 50%;display: inline-block"></div>
                                        <div class="headerImg " style="background:url(//cd.faisys.com/image/avatar/1.jpg.webp) no-repeat;background-size: cover; width: 1.7rem;height: 1.7rem;border-radius: 50%;display: inline-block"></div>
                                    </div>
                                    <div class="eleChild">
                                        <img src="//5372267.s50i.faiusr.com/4/101/ADIIABAEGAAgxfLt5gUogP2SswMwWThU.png.webp" alt="">
                                    </div>
                                </div>
                            </section>
                        </div>
                        <img class="noSlideBgImg" src="images/web-swipe-tip.png" id="array" class="resize">
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
            <div class="music">

            </div>
            <div class="screen">
                <div class="top">心心</div>
                <div class="bottom">
                    <span>会话</span>
                    <span>禁用弹幕</span>
                    <span>弹</span>
                </div>
            </div>
        </div>
        <div class="flex-item right">
            <div>上</div>
            <div>2</div>
            <div>下</div>
        </div>
    </div>
</section>

<div class="testRem">测试缩放</div>


</body>
</html>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/modernizr-3.7.1.min.js"></script><!-- 只让 IE 8 以及更低版本的浏览器下载该脚本 -->

<!--<script src="js/respond.min.js"></script>-->

<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="js/index.js"></script>
<script>

  scaleW = window.innerWidth / 320;
  scaleH = window.innerHeight / 480;
  var resizes = document.querySelectorAll('.resize');
  for (var j = 0; j < resizes.length; j++) {
    resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
    resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
    resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
    resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';

  }
  var scales = document.querySelectorAll('.txt');
  for (var i = 0; i < scales.length; i++) {
    ss = scales[i].style;
    ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform = ss.transform = 'translateX(' + scales[i].offsetWidth * (scaleW - 1) / 2 + 'px) translateY(' + scales[i].offsetHeight * (scaleH - 1) / 2 + 'px)scaleX(' + scaleW + ') scaleY(' + scaleH + ') ';
  }

  var changeCount = 0;
  var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        pagination: '.swiper-pagination',
        mousewheelControl: true,
        onInit: function (swiper) {
          swiperAnimateCache(swiper);
          swiperAnimate(swiper);
        },
        onSlideChangeEnd: function (swiper) {
          // if (swiper.activeIndex===2){
          //   $(".skew_left").addClass("rotate_img_left");
          // }else{
          //   $(".skew_left").removeClass("rotate_img_left");
          // }
          swiperAnimate(swiper);
        }
      })


  ;(function (designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

    function refreshRem() {
      var clientWidth = docEl.getBoundingClientRect().width;//获取document的宽度,浏览器屏幕宽度
      maxWidth = maxWidth || 540;//短路运算符，如果前面式子为false再执行后面，如果赋值了maxWidth那么maxWidth=maxWidth,否则没有赋值那么maxWidth为false,就会执行maxWidth=540
      // clientWidth > maxWidth && (clientWidth = maxWidth);//短路运算符，如果前面式子true再执行后面
      var rem = clientWidth * 100 / designWidth;
      remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(remStyle);
    } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(remStyle);
      doc.write(wrap.innerHTML);
      wrap = null;
    }
    refreshRem();
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；


    win.addEventListener("resize", function () {
      clearTimeout(tid); //防止执行两次
      tid = setTimeout(refreshRem, 300);
    }, false);

    /*
    浏览器后退的时候重新计算,为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。
    如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false
    */
    win.addEventListener("pageshow", function (e) {
      if (e.persisted) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
      }
    }, false);

    /*
    为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
    因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。
    如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。
    实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。
    针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。
    */
    if (doc.readyState === "complete") {
      doc.body.style.fontSize = "16px";//页面元素默认16px，如果不设置将是自动为16px显示
    } else {
      doc.addEventListener("DOMContentLoaded", function (e) {
        doc.body.style.fontSize = "16px";
      }, false);
    }
  })(750, 750);
</script>
